<mat-toolbar class="mat-elevation-z2 m-b-20 stbui-background-blue">
    <stbui-brand class="stbui-background-blue" style="margin-left:-16px;"></stbui-brand>
</mat-toolbar>

<stbui-search placeholder="搜索..." class="m-l-10 m-r-10 mat-elevation-z2"></stbui-search>

<div fxLayout="column">
  <mat-card>
    <mat-card-content>
      <stbui-tag-select [tags]="categories" (selectedTagChange)="selectedTagChange($event)"></stbui-tag-select>
    </mat-card-content>
  </mat-card>
</div>


<div fxLayout="row wrap">
  <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let navigation of currentNum">
    <stbui-loading-skeleton></stbui-loading-skeleton>
  </div>

  <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let list of lists">
    <mat-card class="nav-item">
      <div class="nav-item-mask">
        <div class="nav-item-logo" [ngStyle]="{'background-image': list.image_link}"></div>
      </div>

      <mat-card-header>
        <mat-card-title class="nav-title">
          <a href="{{ list.link }}" target="blank">{{ list.title }}</a>
        </mat-card-title>
        <mat-card-subtitle class="nav-desc">{{ list.description }}</mat-card-subtitle>
      </mat-card-header>
    </mat-card>
  </div>
</div>